import React, {useState} from 'react'
import {View, Text, StyleSheet, TextInput} from 'react-native'
import Header from '$/components/Header'
import ViewUtil from '$/utils/ViewUtil'
import NavUtils from '$/utils/NavUtils'
import {connect} from 'react-redux'
import Button from '$/components/Button'
import {login} from '$/actions'

const PwsLogin = props => {
    const {
        app,
        route:{
            params
        }
    } = props;
    let password = null;
    let phone = params.phone;

    const [disabled, setDisabled] = useState(true);

    const onAccountChange = value => {
        if(!value || value.length.length === 0){
            setDisabled(true)
        }else{
            setDisabled(false)
        }
        password = value;
    }

    return (
        <View style={[styles.container, styles.black]}>
            <Header
                title={params.title}
                style={styles.black}
                statusBar={{barStyle: 'light-content'}}
                leftButton={ViewUtil.backButton(() => {
                    NavUtils.back();
                })}
            />
            <View>
                <View style={[styles.formBox]}>
                    <TextInput
                        style={styles.input}
                        placeholder={`请输入密码`}
                        onChangeText={onAccountChange}
                        keyboardType={'numeric'}
                        autoFocus={true}
                        clearButtonMode={'always'}
                        maxLength={11}
                        placeholderTextColor={'#888'}
                    />
                </View>

                <Button
                    disabled={disabled}
                    style={[{
                        borderRadius: 100,
                        backgroundColor: app.color,
                        marginTop: 70
                    }]}
                    onPress={() => props.login({phone, password})}
                >
                    <Text style={{color: '#fff', fontSize: 16}}>立即登录</Text>
                </Button>
            </View>
        </View>
    )
}

export default  connect(({app}) => ({app}), dispatch => ({
    login: o => dispatch(login(o))
}))(PwsLogin);

const styles = StyleSheet.create({
    black: {backgroundColor: '#242424'},
    container:{
        height: '100%',
        paddingLeft: 25,
        paddingRight: 25
    },
    text: {
        fontSize: 15,
        color: '#888',
        marginTop: 30
    },
    formBox:{
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#333',
        marginTop: 50,
        paddingBottom: 5
    },
    text86:{
        fontSize: 20,
        color: '#fff',
        height: 50,
        width: 50,
        lineHeight: 50,
        textAlign: 'center'
    },
    input:{
        flex: 1,
        color: '#fff',
        fontSize: 16,
        padding: 0,
        paddingLeft: 5
    }
})
